<template>
<div>


	<myheader />

	<h1>用户登录</h1>


	<van-count-down v-show="show" ref="countDown" :time="30000" :auto-start="false" @finish="finish"  format="还剩ss秒"  />


	<van-tabs v-model="active">


		
		<van-tab title="账号登录" >
			

			<van-cell-group>
	
	<van-field label="用户名" placeholder="请输入用户名" v-model="username"   />


	<van-field label="密码" placeholder="请输入密码" v-model="password"  type="password"  />



	<van-button @click="login" color="green"> 点击登录 </van-button>


</van-cell-group>



		</van-tab>


		<van-tab title="手机登录" >
			


			<van-cell-group>
	
	<van-field label="手机号" placeholder="请输入手机号" v-model="phone" >

		<template #button>

			<van-button size="small" color="orange" @click="sendmsg" >发送验证码</van-button>
			

		</template>

	</van-field>


	<van-field label="验证码" v-model="code"  />




	<van-button @click="login_msg" color="green"> 点击登录 </van-button>


</van-cell-group>




		</van-tab>





	</van-tabs>






</div>
</template>


<script>


//导入其他组件
import myheader from './myheader.vue';


export default{

	//声明组件
	components:{

		'myheader':myheader,

	},
	//声明变量
	data(){

		return {

			username:"",
			password:"",
			phone:"",
			code:"",

			//表单状态
			active:1,
			//倒计时表单状态
			show:false

		}


	},
	//声明方法
	methods:{


		//手机号登录
		login_msg:function(){

			if(this.code === ""){

				this.$toast.fail("请填写验证码");
				return false;

			}


			//发送请求
			this.axios.get(
				'http://localhost:5000/login/',{


					params:{

						phone:this.phone,
						code:this.code,

					}


				}).then((result) =>{

					console.log(result);

					if(result.data.code==200){

						this.$toast.success('登录成功');

						//数据存储
						localStorage.setItem('id',result.data.id);
						localStorage.setItem('username',result.data.username);


						//跳转
						this.$router.push('/');



					}else{
						this.$toast.fail(result.data.msg);
					}

			});



		},
		//定义发送验证码方法
		sendmsg:function(){


			if(this.phone === ""){

				this.$toast.fail("请填写您的手机号");
				return false;

			}

			//判断
			if(this.show === false){

			//开启倒计时
			this.$refs.countDown.start();
			this.show = true;

			//发送验证码请求

			//发送请求
			this.axios.get(
				'http://localhost:5000/sendmsg/',{


					params:{

						phone:this.phone,

					}


				}).then((result) =>{

					console.log(result);

					if(result.data.code==200){

						this.$toast.success('发送成功');
					}else{
						this.$toast.fail(result.data.msg);
					}

			});

			}else{


				this.$toast.fail("请您稍后发送验证码");


			}


		},
		//倒计时结束
		finish:function(){

			this.$toast.success("倒计时结束");


			//重置倒计时
			this.$refs.countDown.reset();

			//隐藏倒计时
			this.show = false;

		},
		//登录方法
		login:function(){

			if(this.username == ""){

				this.$toast.fail("您的用户名为空");
				return false;
			}

			//发送请求
			this.axios.get(
				'http://localhost:5000/login/',{


					params:{

						username:this.username,
						password:this.password

					}


				}).then((result) =>{

					console.log(result);

					if(result.data.code==200){

						this.$toast.success('登录成功');

						//数据存储
						localStorage.setItem('id',result.data.id);
						localStorage.setItem('username',result.data.username);
						localStorage.setItem("token",result.data.token)

						//跳转
						//this.$router.push('/');
						window.location.href = "/";


					}else{
						this.$toast.fail(result.data.msg);
					}

			});




		}

		


	}


}
	


</script>


<style>

.on { background:purple }
.off {background:orange }

</style>